<template>
  <div class="cascader" @mouseleave="showTag">
    <ul>
      <li class="d-flex" v-for="(menus,index) in showMenus" :key="index">
        <b class="fs-lg">{{menus.title}}</b>
        <div class="d-flex flex-jc-around d-flex-1">
          <a class="fs-sm" href="#" v-for="(hotJob,index) in menus.hots" :key="index">{{hotJob}}</a>
        </div>
        <i class="iconfont icon-arrow-right text-grey"></i>
        <div class="menu-sub-up d-flex">
          <b class="my-0 text-black fs-xl">{{menus.title}}</b>
          <div class="fs-sm text-grey mt-4 d-flex" v-for="(jobs,index) in menus.all" :key="index">
            <label>{{jobs.category}}</label>
            <div class="d-flex d-flex-1 flex-wrap jobs pb-1">
              <a class="mx-3 mb-3" href="#" v-for="(job,index) in jobs.jobs" :key="index">{{job}}</a>
            </div>
          </div>
        </div>
      </li>
    </ul>
    <div class="more-a" @mouseover="hiddenTag">显示全部职位</div>
    <ul class="more-list">
      <li class="d-flex" v-for="(menus,index) in moreMenus" :key="index">
        <b class="fs-lg">{{menus.title}}</b>
        <div class="d-flex flex-jc-around d-flex-1">
          <a class="fs-sm" href="#" v-for="(hotJob,index) in menus.hots" :key="index">{{hotJob}}</a>
        </div>
        <i class="iconfont icon-arrow-right text-grey"></i>
        <div class="menu-sub-down d-flex">
          <b class="my-0 text-black fs-xl">{{menus.title}}</b>
          <div class="fs-sm text-grey mt-4 d-flex" v-for="(jobs,index) in menus.all" :key="index">
            <label>{{jobs.category}}</label>
            <div class="d-flex d-flex-1 flex-wrap jobs pb-1">
              <a class="mx-3 mb-3" href="#" v-for="(job,index) in jobs.jobs" :key="index">{{job}}</a>
            </div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    jobMenus: {
      type: Array
    }
  },
  computed: {
    showMenus() {
      return this.jobMenus.slice(0, 6);
    },
    moreMenus() {
      return this.jobMenus.slice(6);
    }
  },
  methods: {
    hiddenTag(e) {
      let a = e.target;
      a.hidden = true;
      let list = a.nextSibling;
      list.style.display = "block";
    },
    showTag(e) {
      let a = e.target.querySelector(".more-a");
      a.hidden = false;
      let list = a.nextSibling;
      list.style.display = "none";
    }
  }
};
</script>

<style lang="scss">
@import "../assets/style/_variables.scss";

.cascader {
  box-shadow: 5px 5px 15px rgba(3, 0, 0, 0.04);
  background: map-get($colors, "white");
  width: 380px;
  position: absolute;

  ul {
    li {
      position: relative;
      padding: 1.11rem 1.2rem;

      & > b {
        color: map-get($colors, "black");
      }

      &:hover {
        background: map-get($colors, "second");
        color: map-get($colors, "white");
        & > b,
        & > div > a,
        & > i {
          color: map-get($colors, "white");
        }

        .menu-sub {
          display: block;
        }
      }

      .menu-sub {
        display: none;
        position: absolute;
        background: #fff;
        padding: 20px 30px;
        width: 650px;
        left: 100%;
        z-index: 1;
        box-shadow: 0 1px 6px rgba(6, 0, 1, 0.1);

        label {
          width: 80px;
        }

        .jobs {
          border-bottom: 1px solid map-get($colors, "border");
        }
      }
      .menu-sub-up {
        @extend .menu-sub;
        top: 0;
      }
      .menu-sub-down {
        @extend .menu-sub;
        bottom: 0;
      }
    }
  }
  .more-a {
    border-top: 1px dashed map-get($colors, "border");
    color: map-get($colors, "primary");
    padding: 1rem 1.2rem;
  }
  .more-list {
    display: none;
    &:hover {
      display: block;
    }
  }
}
</style>